import 'package:flutter/material.dart';
import 'package:template/common/app_colors.dart';
import 'package:template/common/assets.dart';
import 'package:template/common/button.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  //检查账户输入有效
  bool isUserNameValid = false;

  //表单
  Widget _buildForm() {
    return Container(
      padding: const EdgeInsets.fromLTRB(20, 70, 20, 35),
      decoration: BoxDecoration(
          color: Colors.white, borderRadius: BorderRadius.circular(35)),
      child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        //username
        const Text(
          'userName or email',
          style: TextStyle(
              fontSize: 15,
              fontWeight: FontWeight.w300,
              color: Color(0xff838383)),
        ),
        TextField(
          onChanged: (value) {
            setState(() {
              isUserNameValid = value.isNotEmpty && value.length > 6;
            });
          },
          decoration: InputDecoration(
              hintText: "@",
              prefixIcon: Image.asset(
                AssetsImages.iconUserPng,
                width: 24,
                height: 16,
              ),
              suffixIcon: isUserNameValid == true
                  ? const Icon(
                      Icons.done,
                      color: Colors.green,
                    )
                  : null),
        ),

        //password
        const Text(
          'password',
          style: TextStyle(
              fontSize: 15,
              fontWeight: FontWeight.w300,
              color: Color(0xff838383)),
        ),
        TextField(
          obscureText: true,
          decoration: InputDecoration(
              hintText: "6 digits",
              prefixIcon: Image.asset(
                AssetsImages.iconLockPng,
                width: 19,
                height: 26,
              ),
              suffixIcon: TextButton(
                onPressed: () {},
                child: const Text(
                  "forget?",
                  style: TextStyle(
                      fontSize: 15,
                      fontWeight: FontWeight.w500,
                      color: Color(0xff0274bc)),
                ),
              )),
        ),

        const SizedBox(height: 15),

        //登录
        ButtonWidget(
          text: "Sign In",
          height: 57,
          onPress: () {},
        ),

        const SizedBox(height: 15),
        //注册
        Row(
          children: [
            //文字
            const Text(
              "Dont have an account?",
              style: TextStyle(
                  fontSize: 15,
                  fontWeight: FontWeight.w300,
                  color: Color(0xff0274bc)),
            ),
            //文字按钮
            TextButton(
                onPressed: () {},
                child: const Text(
                  "Sign Up",
                  style: TextStyle(
                      fontSize: 15,
                      fontWeight: FontWeight.bold,
                      color: Color(0xff0274bc)),
                ))
          ],
        )
      ]),
    );
  }

  //主视图
  Widget _buildView() {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          //logo
          Image.asset(
            AssetsImages.logoPng,
            width: 60,
            height: 57,
          ),

          const SizedBox(
            height: 22,
          ),
          //主标题
          const Text(
            "Let Login",
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          ),

          const SizedBox(
            height: 30,
          ),
          //表单
          _buildForm(),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.backgroundSplash,
      body: _buildView(),
    );
  }
}
